import React from 'react';
import { IonSkeletonText, IonItem, IonLabel, IonAvatar } from '@ionic/react';

export const MessageSkeleton: React.FC = () => {
  return (
    <IonItem lines="none" className="chat-message">
      <IonAvatar slot="start">
        <IonSkeletonText animated className="skeleton-avatar" />
      </IonAvatar>
      <IonLabel>
        <div style={{ width: '70%' }}>
          <IonSkeletonText animated style={{ height: '16px' }} />
        </div>
        <div style={{ width: '90%' }}>
          <IonSkeletonText animated style={{ height: '16px' }} />
        </div>
      </IonLabel>
    </IonItem>
  );
};

export const TranslationSkeleton: React.FC = () => {
  return (
    <div className="translation-item">
      <IonItem lines="none" className="translation-source">
        <IonLabel>
          <IonSkeletonText animated style={{ width: '80%', height: '16px' }} />
        </IonLabel>
      </IonItem>
      <IonItem lines="none" className="translation-target">
        <IonLabel>
          <IonSkeletonText animated style={{ width: '90%', height: '16px' }} />
        </IonLabel>
      </IonItem>
    </div>
  );
};